<template>
  <TestLayout>
    <template v-slot:main-left>
      <Institution />
    </template>
    <template v-slot:main-button>
      <mainButton
        :isShowFilse="isShowFilse"
        :main-button="mainButton"
        @toMainSearch="search"
        @toMainSearchReset="reset"
      />
    </template>
    <template v-slot:search-info>
      <float-search
        offset-direction="left"
        class="float-search"
        @click="isBox = !isBox"
      />
      <searchMain
        ref="searchMain"
        size="mini"
        :label-width="labelWidth"
        :model="formData"
        :rules="searchRules"
        :item-list="formItemList"
        @callbackComponent="callbackComponent"
      />
      <el-divider />
    </template>
    <template v-slot:main>
      <drawer-layout>
        <template v-slot:table-left>
          <common-table
            :data="infoList"
            border
            :columns-item="columns"
            :title="infoTitle"
            :loading="false"
            :item-list="itemList"
            :display-column="displayColumn"
            @checkbox-change="selectChangeEvent"
          />
        </template>
        <template v-slot:table-right>
          <common-table
            :data="testList"
            border
            :columns-item="testColumns"
            :title="testTitle"
            @checkbox-change="selectChangeEvent"
          />
        </template>
      </drawer-layout>
    </template>
    <!-- 弹框 -->
    <template v-slot:add-dialog>
      <!-- 新增 -->
      <!-- <personalAddDialog
        :dialog-visible.sync="dialog_show"
        :title="title"
        @close="closeDialog"
      /> -->

      <!-- <pageDialog
        ref="pageDialog"
        :dialog-visible.sync="dialog_show"
        :dialog-config.sync="dialogConfig"
      /> -->
      <adaptive-dialog
        v-if="dialog_test_show"
        :visible.sync="dialog_test_show"
        :test-dialog-config.sync="testDialogConfig"
        title="新增个人档案"
      >
        <template v-slot:default>
          <DynamicLayout @get-lost-page="getLostPage">
            <AddRecordForm ref="ruleForm" />
          </DynamicLayout>
        </template>
        <template v-slot:footer>
          <span>
            <el-button type="success" @click="previewPersonage"
              >预 览</el-button
            >
            <el-button type="info">打 印</el-button>
            <el-button type="warning">导 出</el-button>
            <el-button @click="addDialogClosed">取 消</el-button>
            <el-button
              v-show="isSubmit"
              type="primary"
              @click="submit('testForm')"
              >确 定</el-button
            >
          </span>
        </template>
      </adaptive-dialog>
      <!-- 档案迁移弹框 -->
      <transferDialog :transfer-dialog-show.sync="transferDialogShow" />
    </template>
  </TestLayout>
</template>
<script>
import TestLayout from "@/components/Layout/test.vue"
import Institution from "@/components/Trees/Institution.vue"
import mainButton from "@/components/CommonButtons/MainButton.vue"
import searchMain from "@/components/CommonForm/index.vue"

import transferDialog from "@/views/dialog/record/transferDialog.vue"
import CommonTable from "@/components/CommonTable/index.vue"
import DrawerLayout from "@/components/DrawerLayout/index.vue"
import FloatSearch from "@/components/FloatSearch/index.vue"
// import personalAddDialog from "@/views/dialog/record/personalAddDialog.vue"
// import pageDialog from "@/views/dialog/pageDialog.vue"

import AdaptiveDialog from "@/components/Dialog/AdaptiveDialog.vue"
import DynamicLayout from "@/components/Layout/dynamicLayout.vue"
import AddRecordForm from "./dialog/AddRecordForm.vue"

// 加载模拟数据
import {
  infoList,
  testList,
  sexs,
  fileStatusType,
  liveType,
  dataSource,
  helpPoor,
  peopleSigns,
  publicSigns,
  addressList,
  information,
  dataProps
} from "@/simdata/healthData.js"
// import Defaultprofile from "@/assets/images/defaultprofile.png"
// 初始数据
const defaultDic = {
  keyword: "", // 个人信息项 字段
  keyValue: "", // 值
  createDate: null, // 建档日期 开始
  endDate: null, // 结束日期
  fileStatus: null // 档案状态
}
export default {
  name: "Rights",
  components: {
    TestLayout,
    Institution,
    mainButton,
    searchMain,
    CommonTable,
    // pageDialog,
    transferDialog,
    DrawerLayout,
    FloatSearch,
    // personalAddDialog,

    AdaptiveDialog,
    DynamicLayout,
    AddRecordForm
  },
  data() {
    return {
      isShowFilse: true, // 控制档案迁移下拉
      isSubmit: false, // 控制确定按钮
      isBox: false,
      itemList: [
        {
          label: "高",
          color: "#66FFFF"
        },
        {
          label: "贫",
          color: "#BF924C"
        }
      ],

      // 配置常用按钮
      mainButton: [
        {
          label: "新增",
          icon: "el-icon-circle-plus-outline",
          type: "primary",
          handle: () => this.addHandle()
        },
        {
          label: "入户",
          icon: "el-icon-edit-outline",
          type: "success",
          handle: () => {
            console.log("点击入户了")
          }
        }
        // {
        //   label: "档案迁移",
        //   icon: "el-icon-postcard",
        //   type: "warning",
        //   handle: () => this.transferHandler()
        // },
        // {
        //   isShow: "files",
        //   label: "档案迁移",
        //   icon: "el-icon-postcard",
        //   type: "warning",
        //   options: [
        //     { label: "批量迁入", value: 1, handle: () => {} },
        //     { label: "批量迁出", value: 2, handle: () => {} }
        //   ]
        // }
      ],
      // 查询表单
      formData: Object.assign({}, defaultDic),
      // label的宽度
      labelWidth: "auto",
      // 验证
      searchRules: {},
      // 配置search label表单
      formItemList: [
        {
          type: "myInformation",
          label: "个人信息查询项目",
          span: 14,
          options: [
            { label: "个人档案号", value: 1 },
            { label: "家庭档案号", value: 2 },
            { label: "姓名", value: 3 },
            { label: "身份证号", value: 4 }
          ],
          props: dataProps
        },
        {
          type: "TimeQueryTest",
          label: "建档日期",
          prop: "createDate",
          width: "80px",
          span: 4,
          placeholder: "请选择..."
        },
        {
          type: "Select",
          label: "档案状态",
          prop: "fileStatus",
          width: "120px",
          span: 8,
          options: fileStatusType,
          props: dataProps,
          change: row => "",
          placeholder: "请选择..."
        }
      ],
      // 所有列表数据
      infoTitle: "人员基本信息列表",
      testTitle: "家庭成员列表",
      infoList: infoList,
      testList: testList,
      // 配置显示的label标签
      columns: [
        { prop: "name", label: "姓名", width: "100" },
        {
          prop: "sex",
          label: "性别",
          width: "68",
          type: "sex",
          option: [
            {
              value: 1,
              label: "未知的性别"
            },
            {
              value: 2,
              label: "男"
            },
            {
              value: 3,
              label: "女"
            },
            {
              value: 4,
              label: "全部"
            }
          ]
        },
        { prop: "age", label: "年龄", width: "80" },
        { prop: "birthdata", label: "出生日期", width: "100" },
        { prop: "identityNumber", label: "身份证号", width: "180" },
        { prop: "phonenumber", label: "本人电话号码", width: "150" },
        { prop: "linkName", label: "联系人姓名", width: "100" },
        { prop: "linkNumber", label: "联系人电话", width: "150" },
        { prop: "nowAddress", label: "现住地址", width: "150" },
        {
          prop: "isSign",
          label: "是否签约",
          width: "80",
          type: "isSign",
          callback: row => {
            let text = ""
            switch (row.isSign) {
              case 1:
                text = "已签约"
                break
              case 2:
                text = "未签约"
                break
              default:
                text = "其他"
            }
            return text
          }
        }, //
        { prop: "responsibleDoctor", label: "责任医生", width: "100" },
        {
          prop: "isHome",
          label: "家庭信息",
          width: "80",
          type: "isHome",
          callback: row => {
            let text = ""
            switch (row.isHome) {
              case 1:
                text = "有"
                break
              case 2:
                text = "无"
                break
              default:
                text = "其他"
            }
            return text
          }
        },
        { prop: "creatDoctor", label: "建档医生", width: "100" },
        { prop: "createDate", label: "建档日期", width: "100" },
        { prop: "myNumber", label: "个人健康档案号", width: "150" },
        { prop: "number", label: "家庭档案号", width: "150" },
        {
          prop: "isComplete",
          label: "信息是否完整",
          width: "120",
          type: "isComplete",
          callback: row => {
            let text = ""
            switch (row.isComplete) {
              case 1:
                text = "完整"
                break
              case 2:
                text = "不完整"
                break
              default:
                text = "其他"
            }
            return text
          }
        },
        {
          prop: "isLibrary",
          label: "人口库标记",
          width: "100",
          type: "isLibrary",
          callback: row => {
            let text = ""
            switch (row.isLibrary) {
              case 1:
                text = "是"
                break
              case 2:
                text = "否"
                break
              default:
                text = "其他"
            }
            return text
          }
        },
        {
          prop: "isPublic",
          label: "公安标记",
          width: "80",
          type: "isPublic",
          callback: row => {
            let text = ""
            switch (row.isPublic) {
              case 1:
                text = "是"
                break
              case 2:
                text = "否"
                break
              default:
                text = "其他"
            }
            return text
          }
        }
      ],
      // 控制表格操作按钮的显示隐藏
      displayColumn: {
        operationCol: true,
        editBtn: true,
        removeBtn: true
      },
      // test配置label标签
      testColumns: [
        { prop: "name", label: "姓名", width: "100" },
        { prop: "sex", label: "性别", width: "68" },
        { prop: "age", label: "年龄", width: "80" },
        { prop: "birthdata", label: "出生日期", width: "100" },
        { prop: "identityNumber", label: "身份证号", width: "180" },
        { prop: "relation", label: "与户主关系", width: "100" }
      ],
      // Main分页
      mainPage: {
        currentPage: 1,
        pageSize: 10,
        totalResult: 100
      },
      // Member分页
      memberPage: {
        currentPage: 1,
        pageSize: 10,
        totalResult: 100
      },
      // 弹框标记
      dialog_show: false,
      transferDialogShow: false, // 档案迁移控制
      // 弹窗的标题
      title: "",

      dialogConfig: {
        title: "",
        dialogType: "new" // 新增的控制
      },
      testDialogConfig: {
        title: "",
        dialogType: "new" // 新增的控制
      },
      dialog_test_show: false
    }
  },

  created() {},
  methods: {
    previewPersonage() {
      const routeUrl = this.$router.resolve({
        path: "/preview/personal-record"
      })
      window.open(routeUrl.href, "_blank")
    },
    // 点击新增按钮
    addHandle() {
      // this.title = "新增档案"
      // this.dialog_show = true
      this.dialog_test_show = true
    },
    // 切换常用地址
    // handleChange() {
    //   console.log("点击了")
    // },
    // 点击搜索按钮
    search(formName) {
      this.$refs.searchMain.$refs[formName].validate(valid => {
        if (valid) {
          console.log(this.formData)

          // 调用接口
          this.callbackComponent()
        } else {
          console.log("error submit!!")
          return false
        }
      })
    },
    // 点击重置按钮
    reset(formName) {
      this.$refs.searchMain.$refs[formName].resetFields()
      this.formData = Object.assign({}, defaultDic)
      this.$refs.searchMain.$refs.myInformation[0].$data.keyValueD = true
    },
    // 点击搜索后，请求后台接口了
    callbackComponent() {
      console.log("调接口")
    },
    // 关闭弹框
    closeDialog(isTrue) {
      // this.dialog_show = isTrue
    },

    // 监听 pagesize 改变的事件
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
    },
    // 监听 页码值的改变事件
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage
    },
    // 家庭基本信息复选框选中
    selectChangeEvent({ checked, records }) {
      console.log(checked)
      console.log(records)
    },
    // 点击档案迁移
    transferHandler() {
      this.transferDialogShow = true
    },
    addDialogClosed() {
      // 重置表单
      this.$refs.ruleForm.resetForm()
      this.dialog_test_show = false
    },
    submit() {
      this.$refs.ruleForm.submitHandle()
      // this.addDialogClosed()
    },
    // 显示确定提交
    getLostPage(isType) {
      this.isSubmit = isType
    }
  }
}
</script>
<style lang="scss" scoped></style>
